<template>
  <div>
    <MainFrame menuIndex="ProductList">
      <div slot='content'>
        <div class="top-title">
          商品详情
        </div>
        <div class="top-button">
          <el-button type="primary" @click="back">返回</el-button>
        </div>
        <ttForm v-model="form">
          <div slot="slot">
            <el-form-item label="团购方案" v-if="form.items[6].value == 1 && form.id != null">
              <div style="padding-bottom: 10px;">
                <el-button type="primary" @click="addGroupProduct">添加团购方案</el-button>
              </div>
              <el-table :data="form.items[8].value" style="width: 100%">
                <el-table-column prop="num" label="几人团">
                </el-table-column>
                <el-table-column prop="price" label="价格">
                  <template slot-scope="scope">
                    <span>{{ (scope.row.price * 0.01).toFixed(2) }}</span>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button type="text" @click="editGroupProduct(scope.row)">详情</el-button>
                    <el-button type="text" style="color:#F56C6C" @click="delGroupProduct(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item label="商品型号" v-if="form.items[6].value != 1 && form.id != null">
              <div style="padding-bottom: 10px;">
                <el-button type="primary" @click="addProductItem">添加商品型号</el-button>
              </div>
              <el-table :data="form.items[8].value" style="width: 100%">
                <el-table-column prop="itemName" label="型号">
                </el-table-column>
                <el-table-column prop="price" label="价格">
                  <template slot-scope="scope">
                    <span>{{ (scope.row.price * 0.01).toFixed(2) }}</span>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button type="text" @click="editProductItem(scope.row)">详情</el-button>
                    <el-button type="text" style="color:#F56C6C" @click="delProductItem(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item label="详情">
              <editor id="editor_1" height="700px" width="100%" :content="form.items[9].value" pluginsPath="/static/kindeditor/plugins/" :loadStyleMode="false" @on-content-change="onContentChange" uploadJson="/admin/api/uploadEditorImg" filePostName="file" :items="toolbarItems"></editor>
            </el-form-item>
          </div>
        </ttForm>
        <el-dialog title="团购方案" :visible.sync="dialogGPVisible" v-if="form.items[6].value == 1">
          <el-form :model="groupProduct">
            <el-form-item label="几人团" label-width="150">
              <el-input v-model="groupProduct.num" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" label-width="150">
              <el-input v-model="groupProduct.price" auto-complete="off" onkeyup="this.value=/^\d+\.?\d{0,2}$/.test(this.value) ? this.value : this.value.substring(0,this.value.length-1)"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogGPVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitGP">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="商品型号" :visible.sync="dialogPIVisible" v-else>
          <el-form :model="productItem">
            <el-form-item label="型号" label-width="150">
              <el-input v-model="productItem.itemName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" label-width="150">
              <el-input v-model="productItem.price" auto-complete="off" onkeyup="this.value=/^\d+\.?\d{0,2}$/.test(this.value) ? this.value : this.value.substring(0,this.value.length-1)"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogPIVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitPI">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </MainFrame>
  </div>
</template>
<script>
import MainFrame from '@/components/MainFrame'
import utils from '../ttJs/utils.js'
import ttForm from '@/tt_components/ttForm'
export default {
  components: {
    MainFrame,
    ttForm
  },
  data() {
    var validator = (rule, value, callback) => {
      callback();
    };
    return {
      dialogGPVisible: false,
      dialogPIVisible: false,
      form: {
        id: null,
        url: '/admin/product/submit',
        items: [
          { name: 'name', value: '', label: '名称', placeholder: '请输入名称', type: 'input', rules: true, msg: '名称不能为空' }, // 0
          { name: 'cover', value: '', imgUrl: '', label: '封面', type: 'img', url: '/admin/api/upload', index: 1, limit: 1 }, // 1
          { name: 'images', value: '', list: [], label: '封面', type: 'images', url: '/admin/api/upload', index: 2, limit: 4, multiple: false }, // 2
          { name: 'desc', value: '', label: '描述', placeholder: '请输入描述', type: 'textarea', rows: 3 }, // 3
          { name: 'price', value: '', label: '价格', placeholder: '请输入价格', type: 'currency' }, // 4
          { name: 'type', value: '', label: '品类', type: 'select' }, // 5
          { name: 'isGroup', value: '', label: '团购/商品', list: [{ id: 0, title: "商品" }, { id: 1, title: "团购" }], type: 'radio' }, // 6
          { name: 'stock', value: '', label: '库存', placeholder: '请输入库存', type: 'input' }, // 7
          { name: 'size', value: [], type: 'slot' }, // 8
          { name: 'html', value: '', type: 'slot' } // 9
        ],
        rules: {
          name: [{ required: true, validator: validator, trigger: 'blur' }],
          cover: [{ required: true, validator: validator, trigger: 'blur' }]
        }
      },
      groupProduct: {
        id: null,
        num: '',
        price: ''
      },
      productItem: {
        id: null,
        itemName: '',
        price: ''
      },
      toolbarItems: [
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'multiimage',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
        'anchor', 'link', 'unlink', '|', 'about'
      ]
    };
  },
  mounted: function() {
    this.init();
  },
  methods: {
    init() {
      var self = this;
      var url = '/admin/type/list';
      var params = {};
      var success = function(response) {
        self.form.items[5].list = response.info;
        self.form.items[5].value = 1;
        self.getInfo();
      }
      var fail = function() {
        utils.fail('加载失败')
      }
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    },
    getInfo() {
      var self = this;
      var id = self.$route.query.id
      if (utils.validateData(id)) {
        self.form.id = id;
        var url = '/admin/product/info';
        var params = { productId: id }
        var success = function(response) {
          var info = response.info;
          var items = self.form.items
          for (var index in items) {
            for (var key in info) {
              if (items[index].name == key) {
                if (items[index].type == 'img') {
                  if (utils.validateData(info[key])) {
                    items[index].imgUrl = info[key];
                  }
                }
                if (items[index].type == 'images') {
                  if (utils.validateData(info[key])) {
                    var images = info[key].split(';')
                    while (items[index].list.length > 0) {
                      items[index].list.pop();
                    }
                    for (var i in images) {
                      if (utils.validateData(images[i])) {
                        var filename = images[i].substring(images[i].lastIndexOf('/') + 1, images[i].indexOf('?') > 0 ? images[i].indexOf('?') : images[i].length );
                        var image = {
                          name: filename,
                          url: images[i]
                        }
                        items[index].list.push(image)
                      }
                    }
                  }
                }
                if (items[index].name == 'isGroup') {
                  items[index].disabled = true;
                }
                if (items[index].name == 'price') {
                  items[index].value = (info[key] * 0.01).toFixed(2);
                  continue;
                }
                items[index].value = info[key]
              }
            }
          }
        }
        var fail = function() {
          utils.fail('加载失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }
    },
    addGroupProduct() {
      var self = this;
      self.groupProduct = {
        id: null,
        num: '',
        price: ''
      }
      self.dialogGPVisible = true;
    },
    editGroupProduct(item) {
      var self = this;
      self.groupProduct = {
        id: item.id,
        num: item.num,
        price: (item.price * 0.01).toFixed(2)
      }
      self.dialogGPVisible = true;
    },
    delGroupProduct(item) {
      var self = this;
      var event = function() {
        var params = { id: item.id };
        var url = '/admin/product/delGroupProduct';
        var success = function(response) {
          self.getInfo();
          self.$message({
            message: '删除成功',
            type: 'success'
          });
        }
        var fail = function() {
          utils.fail('删除失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete);
      }
      utils.del(event, '确定删除？');
    },
    submitGP() {
      var self = this;
      var url = '/admin/product/submitGroupProduct';
      var params = {
        id: self.groupProduct.id,
        num: self.groupProduct.num,
        price: (self.groupProduct.price * 100).toFixed(),
        productId: self.form.id
      }
      var success = function(response) {
          self.$message({
            message: '保存成功',
            type: 'success'
          });
          self.getInfo();
          self.dialogGPVisible = false;
      }
      var fail = function(data) {
        utils.fail('保存失败');
      }
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete);
    },
    addProductItem() {
      var self = this;
      self.productItem = {
        id: null,
        itemName: '',
        price: ''
      }
      self.dialogPIVisible = true;
    },
    editProductItem(item) {
      var self = this;
      self.productItem = {
        id: item.id,
        itemName: item.itemName,
        price: (item.price * 0.01).toFixed(2)
      }
      self.dialogPIVisible = true;
    },
    delProductItem(item) {
      var self = this;
      var event = function() {
        var params = { id: item.id };
        var url = '/admin/product/delProductItem';
        var success = function(response) {
          self.getInfo();
          self.$message({
            message: '删除成功',
            type: 'success'
          });
        }
        var fail = function() {
          utils.fail('删除失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete);
      }
      utils.del(event, '确定删除？');
    },
    submitPI() {
      var self = this;
      var url = '/admin/product/submitProductItem';
      var params = {
        id: self.productItem.id,
        itemName: self.productItem.itemName,
        price: (self.productItem.price * 100).toFixed(),
        productId: self.form.id
      }
      var success = function(response) {
          self.$message({
            message: '保存成功',
            type: 'success'
          });
          self.getInfo();
          self.dialogPIVisible = false;
      }
      var fail = function(data) {
        utils.fail('保存失败');
      }
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete);
    },
    onContentChange(val) {
      this.form.items[9].value = val;
    },
    back() {
      window.history.back();
    }
  }
};

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.top-title {
  margin: 0 0 20px 150px;
  font-size: 18px;
  font-weight: bold;
}

.top-button {
  margin: 0 0 20px 150px;
}

</style>
